<!--
 * @Author: your name
 * @Date: 2021-12-16 19:54:13
 * @LastEditTime: 2021-12-22 20:08:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \project_am\am-dashboard\src\pages\government\components\Bottom1.vue
-->
<!--
  功能 左侧第一个图形
  作者：licy
  邮箱：licy@briup.com
  时间：2021年05月5日 20:21:48
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Line } from '@antv/g2plot';
import {get} from '../../../utils/request'
  export default {
    data(){
        return{
          dd:[]
        }
      },
    async mounted() {
      // 4. 在页面渲染完成后调用图表的渲染
    
        await this.loadData();
        this.initChart();
      
    },
    methods:{
      // 3. 初始化图表
      async loadData(){
        let url ="/dashboard/queryMouthData"
        let resp=await get(url);
        this.dd=resp.data;
      },
      initChart(){
        const data = this.dd;
        const line = new Line(this.$refs.bottom1_container, {
          data,
          xField: 'date',
          yField: 'value',
          seriesField: 'type',
          legend:false,
          xAxis: {
            label: {
              rotate: -45,
              offset: 10,
              style: {
                fill: "white",
                fontFamily: "TencentSans",
                fontSize: 16,
              },
            },
          },
          yAxis: {
            label: {
              style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
             }
            },
          },
        });
        line.render();
    }
  }
}
</script>